import React, { useEffect } from 'react'
import { Card } from 'antd'
import echarts from '../../../plugin/echarts'
/* 
1.准备一个容器，具有宽高
2.获取容器通过echarts.init()方法初始化echarts实例
3.根据个人的需求去配置图表
4.通过setOption()方法生成图表
*/

export default function Pie() {
  const option = {
    // 标题
    title: {
      text: '用户骑行订单',
      // 标题水平居中
      x: 'center'
    },
    // 图例
    legend: {
      // 设置图例的方向
      orient: 'horizontal',

      // 偏移方向
      right: 10,
      top: 30,
      bottom: 20,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // 提示框
    tooltip: {
      // 触发类型 鼠标悬浮到折现点的时候就会显示提示框
      trigger: 'item',
      // 格式化配置内容样式  饼图：a =>series.name b=>series.data.name c=>series.data.value
      // d =>百分比
      formatter: '{a}<br/>{b}:{c}({d}%)'
    },

    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '订单量',
        // 图表的类型 bar 是柱形图
        type: 'pie',
        // y轴的值，要与x轴对应起来
        data: [
          {
            value: 1000,
            name: '周一'
          },
          {
            value: 1000,
            name: '周二'
          },
          {
            value: 2000,
            name: '周三'
          },
          {
            value: 3000,
            name: '周四'
          },
          {
            value: 4000,
            name: '周五'
          },
          {
            value: 5000,
            name: '周六'
          },
          {
            value: 6000,
            name: '周日'
          }
        ]
      }
    ]
  }


  const roundPieOption = {
    // 标题
    title: {
      text: '用户骑行订单',
      // 标题水平居中
      x: 'center'
    },
    // 图例
    legend: {
      // 设置图例的方向
      orient: 'vertical',

      // 偏移方向
      right: 10,
      top: 30,
      bottom: 20,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // 提示框
    tooltip: {
      // 触发类型 鼠标悬浮到折现点的时候就会显示提示框
      trigger: 'item',
      // 格式化配置内容样式  饼图：a =>series.name b=>series.data.name c=>series.data.value
      // d =>百分比
      formatter: '{a}<br/>{b}:{c}({d}%)'
    },

    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '订单量',
        // 图表的类型 bar 是柱形图
        type: 'pie',
        radius: ['50%', '80%'],
        center: ['50%', '50%'],
        // y轴的值，要与x轴对应起来
        data: [
          {
            value: 1000,
            name: '周一'
          },
          {
            value: 1000,
            name: '周二'
          },
          {
            value: 2000,
            name: '周三'
          },
          {
            value: 3000,
            name: '周四'
          },
          {
            value: 4000,
            name: '周五'
          },
          {
            value: 5000,
            name: '周六'
          },
          {
            value: 6000,
            name: '周日'
          }
        ]
      }
    ]
  }




  function initPie() {
    const Charts = echarts.init(document.getElementById('pie'))
    Charts.setOption(option)
  }


  function roundPie() {
    const Charts = echarts.init(document.getElementById('round_pie'))
    Charts.setOption(roundPieOption)
  }

  useEffect(() => {
    initPie()
    // eslint-disable-next-line
  }, [])


  useEffect(() => {
    roundPie()
    // eslint-disable-next-line
  }, [])

  return (
    <div>
      <Card>
        <div id="pie" style={{ height: 500 }}></div>
      </Card>

      <Card>
        <div id="round_pie" style={{ height: 500 }}></div>
      </Card>
    </div>
  )
}
